<template>
  <div class="common-page layout-view">
    <div class="case-block">
      <div class="title">缓动效果（跳动）</div>
      <div class="sample a">
        <div class="ball"></div>
      </div>
    </div>
    <div class="case-block">
      <div class="title">回弹过渡</div>
      <div>此处使用 cubic-bezier曲线 生成一个 运动方向为“反向” 的 过渡效果</div>
      <div class="sample b">
        <div class="model">hover看效果</div>
      </div>
    </div>
    <div class="case-block">
      <div class="title">帧动画</div>
      <div class="sample c">
        <div><strong>下面两个红块有时长为3s的动画， 分为3份 逐帧播放</strong></div>
        <div>steps(3, end): 需要等一秒后才会进行一帧的变动（变动的帧在end位置执行）</div>
        <div class="sample-wrap first">
          <div class="model"></div>
        </div>
        <div>steps(3, start): 先执行一帧的变动，然后等一秒再执行下一帧（变动的帧在start位置执行）</div>
        <div class="sample-wrap second">
          <div class="model"></div>
        </div>
      </div>
    </div>
    <div class="case-block">
      <div class="title">闪烁动画</div>
      <div class="sample d">
        <div>过渡闪烁</div>
        <h1 class="model">hello world</h1>
        <div>硬切闪烁</div>
        <h1 class="model-b">hello world</h1>
      </div>
    </div>
    <div class="case-block">
      <div class="title">animation-play-state 定义动画播放状态</div>
      <div class="sample e">
        <div class="model first"></div>
        动画播放：<input class="trigger" type="checkbox" />
        <div class="model second"></div>  
      </div>
    </div>
    <div class="case-block">
      <div class="title">打字效果</div>
      <div class="sample f">
        <h2 class="model first">ABCDEFGHIJ</h2>
        <h2 class="model second">loading<span>...</span></h2>
      </div>
    </div>
    <div class="case-block">
      <div class="title">沿环形路径平移的动画</div>
      <div class="sample g">
        <div class="path">
          <div class="avatar">
            <img src="../../../../assets/img/jizhi.png" alt="" />
          </div>
        </div>
        <div class="round">
          <img src="../../../../assets/img/jizhi.png" alt="" />
        </div>  
      </div>
    </div>   
  </div>
</template>
<style scoped lang="stylus">
// @import '../../../../styles/mixins.styl'

.case-block
  width 100%
  padding 10px;
  border-bottom 1px solid lightgray
  .title
    font-size: 18px
    font-weight bold
.sample.a
  width 250px;
  height 400px;
  border 1px solid red
  .ball
    width 50px
    height 50px
    margin 0 auto
    border-radius 50%
    background red   
    &:hover
      animation: bounce 1s cubic-bezier(.29,-0.01,.6,.15) // (.34,.05,.89,.18)
      animation-fill-mode forwards
@keyframes bounce
  60%, 80%, to 
    transform: translateY(350px)
    animation-timing-function: ease;
  70%
    transform: translateY(250px)
  90%
    transform: translateY(300px)

.sample.b
  height 250px
  .model
    width 100px
    height 100px
    background red
    transform-origin: left top
    &:hover
      transform scale(2)
      transition: .3s cubic-bezier(.31,1.98,.79,1.48) transform // (.25,.1,.3,1.5)

.sample.c
  .sample-wrap
    margin-bottom 10px;
    .model
      width 100px
      height 100px
      background red
  .sample-wrap.first:hover .model
    animation: step-move 3s;
    animation-timing-function: steps(3, end);
    animation-fill-mode forwards
  .sample-wrap.second:hover .model
    animation: step-move 1s;
    animation-timing-function: steps(3, start);
    animation-fill-mode forwards
@keyframes step-move
  from
    transform translateX(0)
  to
    transform translateX(700px)
.sample.d
  .model:hover
    animation 0.8s blink;
    animation-timing-function linear
    animation-iteration-count 6
    animation-direction alternate
  .model-b
    color red
    &:hover
      animation 0.8s blink;
      animation-timing-function steps(1)
      animation-iteration-count infinite
@keyframes blink
  50%
    color transparent
.sample.e
  .model
    width 150px;
    height 150px
    border 1px solid red
    background-image url('../../../../assets/img/jizhi.png')
    animation 2s bg-change linear infinite
    animation-play-state paused
    &.first:hover
      animation-play-state running
  .trigger:checked ~ .model.second
    animation-play-state running
@keyframes bg-change
  to
    background-position 100% 100%

.sample.f
  .model.first
    overflow hidden
    white-space: nowrap;
    width 10ch
    font: bold 200% Consolas, Monaco, monospace;
    border-right 1px solid;
    animation 8s typing steps(10),
              0.7s caret steps(1)
    animation-iteration-count infinite
    animation-animation-play-state paused
    &:hover
      animation-play-state running
  .model.second
    display inline-block
    span
      float right
      display block
      width 4ch
      overflow hidden
      white-space: nowrap;
      font-family Consolas, Monaco, monospace;
      animation 3s dot steps(4)
      animation-iteration-count infinite
@keyframes dot
  0%
    width 0
  100%
    width 4ch
@keyframes typing
  from
    width 0ch  
@keyframes caret
  50%
    border-right-color: transparent

.sample.g
  .path
    width 300px
    height 300px
    padding 10px
    border-radius 50%
    background red
    .avatar
      margin 0px auto
      width 50px;
      border-radius 50%
      overflow hidden
      animation 3s spin infinite linear
      transform-origin 50% 140px
      img
        display: block;
        width: inherit
        animation: inherit
        animation-direction reverse
        transform-origin 50% 50%
  .round
    width 300px
    height 300px
    padding 10px
    margin 10px
    border-radius 50%
    background green
    img
      display block
      margin calc(50% - 25px) auto 0
      width 50px;
      border-radius 50%
      animation: 3s spin2 infinite linear;
@keyframes spin
  to
    transform rotate(1turn)
@keyframes spin2 
  from
    transform: rotate(0turn) translateY(-150px) translateY(50%) rotate(1turn);
  to
    transform: rotate(1turn) translateY(-150px) translateY(50%) rotate(0turn);

</style> 
<script>
export default {
  name: 'AnimationView',
  props: {

  },
  data () {
    return {
    }
  },
  computed: {
     
  },
  created() {
  },
  mounted() {
     
  },
  methods: {
  }
}
</script>
